<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>商品列表</title>
	<link type="text/css" th:href="@{/html/css/bootstrap.min.css}" rel="stylesheet" />
	<script type="text/javascript" th:src="@{/html/js/jquery-1.12.4.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/bootstrap.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/vue.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/axios.min.js}"></script>
	<style type="text/css">
		.mycss{
			color: red;
			background: #ddd;
		}
	</style>
</head>
<body>
	<div id="app" class="container-fluid" style="margin-top: 10px;">
		<input id="username" type="hidden" th:value="${session.user.username}" />
		<table class="table">
			<caption>
				<button class="btn btn-default btn-sm" v-on:click="add()">添加</button>
			</caption>
			<thead>
				<tr>
					<th>图片</th>
					<th>类别</th>
					<th>名称</th>
					<th>原价</th>
					<th>售价</th>
					<th>说明</th>
					<th>库存</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in pager.content">
					<td>
						<img class="img-thumbnail" style="height: 30px;" v-bind:src="'/mymall/picture/'+item.gno" />
					</td>
					<td>{{item.gtype}}</td>
					<td>{{item.gname}}</span></td>
					<td>{{item.gprice}}</td>
					<td>{{item.gsale}}</td>
					<td>{{item.gdesc}}</td>
					<td>{{item.gleft}}</td>
					<td>{{item.dictVO.dvalue}}</td>
					<td>
						<button v-if="item.gstatus==401" class="btn btn-default btn-sm" v-on:click="updown(item.gno)">下架</button>
						<button v-if="item.gstatus==402" class="btn btn-default btn-sm" v-on:click="updown(item.gno)">上架</button>
						<button v-if="item.gstatus==402" class="btn btn-default btn-sm">编辑</button>
					</td>
				</tr>
			</tbody>
			<tfoot>
                <tr>
                    <td colspan="9">
                        <ul class="pagination">
                            <li><a href="#" @click.prevent="list(0)">&laquo;</a></li>
                            <li><a href="#" @click.prevent="list(pager.pageable.pageNumber-1)">&larr;</a></li>
                            <li v-for="n in end-begin+1" :class="pager.pageable.pageNumber==begin+n-2?'active':''">
                                <a href="#" @click.prevent="list(begin+n-2)">{{begin+n-1}}</a>
                            </li>
                            <li><a href="#" @click.prevent="list(pager.pageable.pageNumber+1)">&rarr;</a></li>
                            <li><a href="#" @click.prevent="list(pager.totalPages-1)">&raquo;</a></li>
                        </ul>
                    </td>
                </tr>
            </tfoot>
		</table>
		<div id="mymodal" class="modal" >
			<div class="modal-dialog" data-backdrop="static">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button class="close" data-dismiss="modal">&times;</button>
		                <h4 class="modal-title">添加商品</h4>
		            </div>
		            <div class="modal-body">
			            <form class="form-horizontal" v-on:submit.prevent="added()" >			       
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">名称:</label>
				                <div class="col-sm-5">
				                    <input type="text" v-model="good.gname" placeholder="请输入商品名称" required="required" class="form-control" />
				                </div>
				                <div class="col-sm-5 help-block">商品名称不能为空</div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">类别:</label>
				                <div class="col-sm-5">
				                    <select v-model="good.gtype" class="form-control" required="required">
										<option v-for="item in typeOpts" v-bind:value="item.dvalue">{{item.dvalue}}</option>
									</select>
				                </div>
				                <div class="col-sm-5 help-block">商品类别不能为空</div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">原价:</label>
				                <div class="col-sm-5">
				                    <input type="number" v-model="good.gprice" placeholder="请输入商品原价" required="required" class="form-control" />
				                </div>
				                <div class="col-sm-5 help-block">商品原价不能为空</div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">售价:</label>
				                <div class="col-sm-5">
				                    <input type="number" v-model="good.gsale" placeholder="请输入商品售价" required="required" class="form-control" />
				                </div>
				                <div class="col-sm-5 help-block">商品售价不能为空</div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">说明:</label>
				                <div class="col-sm-5">
				                    <input type="text" v-model="good.gdesc" placeholder="请输入价格说明" required="required" class="form-control" />
				                </div>
				                <div class="col-sm-5 help-block">价格说明不能为空</div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">库存:</label>
				                <div class="col-sm-5">
				                    <input type="number" v-model="good.gleft" placeholder="请输入商品库存" required="required" class="form-control" />
				                </div>
				                <div class="col-sm-5 help-block">商品库存不能为空</div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">图片:</label>
				                <div class="col-sm-5">
				                    <input type="file" id="picture" placeholder="请选择商品图片" required="required" class="form-control" />
				                </div>
				                <div class="col-sm-5 help-block">商品图片不能为空</div>
			                </div>
			                <div class="form-group">
				                <div class="col-sm-10 col-sm-offset-2">
				                	<button class="btn btn-default btn-sm">确定</button>
			                		<button class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
				                </div>
			                </div>
			            </form>
		            </div>
		        </div>
	        </div>
	    </div>
    </div>
    <script type="text/javascript">
    	new Vue({
    		el:'#app',
    		data:{
    			serviceUrl:'http://localhost:8001/myservice',
    			page:0,
    			size:10,
		        step:10,
    			begin:0,
                end:0,
    			pager:{},
    			good:{},
    			typeOpts:{}
    		},
    		beforeMount:function(){
    			this.typeList();
    			this.list(this.page);
    		},
    		methods:{
    			typeList:function(){
    				var self = this;
    				var url = self.serviceUrl+"/shop/type/list";
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					self.typeOpts=res.data;
    				});
    			},
    			list:function(page){
    				var self = this;
    				self.page = page<0?0:page;
    				var url = self.serviceUrl+"/shop/good/list/"+
    					self.page+"/"+self.size+"/"+$("#username").val();
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					self.pager = res.data;
    					self.begin = Math.floor(self.page/self.step)*self.step+1;
                        if(self.pager.last){
                            self.end = self.pager.totalPages;
                        }else{
                            self.end = Math.floor(self.page/self.step)*self.step+self.step;
                        }
    				});
    			},
    			add:function(){
    				this.good={};
    				$("#picture").val("");
    				$("#mymodal").modal("show");
    			},
    			added:function(){
    				var self = this;
    				var url = self.serviceUrl+"/shop/add/good";
    				var fd = new FormData();
    				fd.append("gdesc",self.good.gdesc);
    				fd.append("gleft",self.good.gleft);
    				fd.append("gname",self.good.gname);
    				fd.append("gprice",self.good.gprice);
    				fd.append("gsale",self.good.gsale);
    				fd.append("gshop",$("#username").val());
    				fd.append("gtype",self.good.gtype);
    				fd.append("picture",$("#picture")[0].files[0]);
    				axios.defaults.withCredentials = true;
    				axios.post(url,fd).then(function(res){
    					alert(res.data.message);
    					if(res.data.code==200){
    						$("#mymodal").modal("hide");
    						self.list(self.page);
    					}
    				});
    			},
    			updown:function(no){
    				var self = this;
    				var url = self.serviceUrl+"/shop/updown/"+no;
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					alert(res.data.message);
    					if(res.data.code==200){
    						self.list(self.page);
    					}
    				});
    			}
    		}
    	});
    </script>
</body>
</html>